<template>
<div class="login">
    <div class="login-wrap">
        <h1 class="title text-white text-center">系统管理后台</h1>
        <el-form ref="form" :model="form">
            <el-form-item prop="userName" :rules="[{required: true, message: '用户名不能为空'}]">
                <el-input placeholder="admin" prefix-icon="el-icon-user" v-model="form.userName"></el-input>
            </el-form-item>
            <el-form-item prop="password" :rules="[{ required: true, message: '密码不能为空'}]">
                <el-input show-password placeholder="admin" @keyup.enter.native="submitForm('form')" prefix-icon="el-icon-lock" type="password" v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" class="w-100" :loading="loading" @click="submitForm('form')">登录</el-button>
            </el-form-item>
            <el-divider></el-divider>
            <p class="fs-md text-white">账号 : admin 密码 : admin</p>
            <p class="mt-2 fs-md text-white">账号 : test 密码 : test</p>
        </el-form>
    </div>
</div>
</template>

<script>
import {
    setToken
} from '@/utils/auth'
import {
    tipLoginWelcome
} from '@/utils/index'

export default {
    data() {
        return {
            form: {
                userName: '',
                password: ''
            },
            loading: false
        }
    },

    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    this.loading = true
                    const resust = await this.$http.post(this.$api.login, this.form)
                    if (resust.code == 200) {
                        setToken(resust.data)
                        this.$notify({
                            title: resust.msg,
                            message: `${tipLoginWelcome()},欢迎登录系统`,
                            type: 'success'
                        })
                        if (this.$route.query && this.$route.query.redirect) {
                            console.log(this.$route.query.redirect)
                            this.$router.push({
                                path: this.$route.query.redirect,
                                replace: true
                            })
                        } else {
                            this.$router.push({
                                path: '/',
                                replace: true
                            })
                        }
                    } else {
                        this.$notify({
                            title: resust.msg,
                            type: 'warning'
                        })
                    }
                    this.loading = false
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
    },
}
</script>

<style lang="scss" scoped>
.login {

    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    &-wrap {
        width: 500px;
        padding: 30px 50px 20px 50px;
        border-radius: 6px;
        margin-top: -160px;

        .title {
            padding-bottom: 30px;
        }
    }
}
</style>
